.trm-publication {
    max-width: 1024px;
    margin   : 0 auto;

    >p:first-of-type {
        color  : var(--theme-color, #00283a) !important;
        opacity: 1 !important;
    }

    p {
        margin-bottom: 20px;

        +p {
            margin-top: -14px;
        }
    }

    blockquote {
        box-shadow      : var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
        padding         : 0;
        display         : block;
        position        : relative;
        background-color: var(--theme-bg-color, #fcfcfe);
        color           : var(--theme-color, #00283a);
        padding         : var(--card-padding, 40px);
        border-radius   : var(--card-border-radius, 10px);
        font-style      : italic;
        font-size       : 16px;
        font-weight     : 500;
        margin          : 1rem 0;

        &:before {
            margin     : 0;
            color      : var(--primary, #afb42b);
            width      : 50px;
            line-height: 55px;
            content    : '"';
            position   : absolute;
            top        : 10px;
            left       : 10px;
            font-size  : 54px;
        }

        &:after {
            margin     : 0;
            width      : 50px;
            color      : var(--primary, #afb42b);
            line-height: 55px;
            content    : '"';
            position   : absolute;
            bottom     : -20px;
            right      : 2px;
            font-size  : 54px;
        }

    }

    img,
    svg {
        display      : block;
        max-width    : 100%;
        border-radius: 8px;
        margin       : .5rem auto;

        +em {
            display   : block;
            font-size : .9rem;
            font-style: normal;
            text-align: center
        }

        &.emoji {
            display       : inline-block;
            left          : 0;
            transform     : none;
            width         : 1rem;
            height        : 1rem;
            vertical-align: text-top;
            padding       : 0;
            margin        : 0
        }
    }

    [data-fancybox] {
        +em {
            display   : block;
            font-size : .9rem;
            font-style: normal;
            text-align: center
        }
    }

    [data-fancybox="article"] {
        &:after {
            content: "\200B";
            display: block;
            height : 0;
            clear  : both;
        }
    }

    ul {
        padding      : 0;
        margin-left  : 10px;
        margin-bottom: 20px;

        li {
            position       : relative;
            list-style-type: none;
            padding-left   : 20px;

            &:before {
                content      : '';
                position     : absolute;
                top          : 6px;
                left         : 0;
                height       : 10px;
                width        : 10px;
                border       : solid 3px var(--primary, #afb42b);
                border-radius: 50%
            }

            +li {
                margin-top: 10px;
            }
        }

        li:has(>input) {
            padding-left: 0px;

            &:before {
                display: none;
            }
        }

        ul {
            margin-top: 10px;
        }
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
        margin-top   : 2rem;
        margin-bottom: 1rem;
        font-weight  : bold;
        font-size    : initial;
    }

    h4:before,
    h5:before,
    h6:before {
        display: inline-block;
        width  : 1em;
        content: '#';
    }

    h1 {
        font-size: 2.5em;
    }

    h2 {
        font-size     : 1.7em;
        position      : relative;
        padding-bottom: 10px;

        &::before {
            content      : '';
            width        : 100%;
            padding      : 0px 20px;
            border-bottom: 1px solid var(--theme-bg2-color, #f4f5f7);
            position     : absolute;
            bottom       : -1px;
            left         : -20px;
            box-sizing   : unset;
        }

        &::after {
            .transition-mixin();
            content         : '';
            position        : absolute;
            background-color: var(--primary, #afb42b);
            width           : 1em;
            height          : 5px;
            bottom          : -3px;
            left            : 0;
            border-radius   : 10px;
        }

        &:hover::after {
            width: 2em;
        }
    }

    h3 {
        font-size: 1.3em;
    }

    h4 {
        font-size: 1.15em;
    }

    h5 {
        font-size: 1em;
    }

    h6 {
        font-size: 0.9em;
    }

    table {
        display        : table;
        width          : 100%;
        border-spacing : 0;
        border-collapse: collapse;
        empty-cells    : show;

        thead {
            background: var(--tabele-thead-bg-color);
        }

        tr {
            border: 0;

            th,
            td {
                font-size: 16px;
                border   : 1px solid var(--tabele-thead-border-color);
                padding  : 5px 10px;
            }
        }
    }

    details {
        padding: 10px;
        border : 1px solid var(--tab-border-color);

        &[open] {
            summary {
                margin: -10px -10px 10px;
            }
        }

        summary {
            background : var(--tab-botton-bg-color);
            color      : var(--tab-botton-color);
            padding    : 10px 20px;
            margin     : -10px;
            cursor     : pointer;
            user-select: none;
        }
    }

    a {
        background     : linear-gradient(var(--primary-50, #afb42b), var(--primary-weak-50, #afb42b)) bottom no-repeat;
        background-size: 100% .4em;
        .transition-mixin();

        &:hover {
            background-size: 100% 60%;
        }
    }

    p>code,
    >code {
        color        : var(--code-color);
        background   : var(--code-bg-color);
        border-radius: 4px;
        padding      : 3px 6px;
        margin       : 0 5px;
        font-size    : 90%;
        word-break   : break-all;
        word-wrap    : break-word;
        white-space  : normal;
    }
}

/* 标签页 */
.trm-tabs {
    position     : relative;
    margin       : 0 0 20px;
    border-right : 1px solid var(--tab-border-color);
    border-bottom: 1px solid var(--tab-border-color);
    border-left  : 1px solid var(--tab-border-color);

    .trm-nav-tabs {
        background: var(--tab-botton-bg-color);
        display   : flex;
        flex-wrap : wrap;
        margin    : 0;
        padding   : 0;

        .trm-tab {
            margin : 0;
            padding: 0;


            button {
                border     : none;
                background : var(--tab-botton-bg-color);
                border-top : 2px solid var(--tab-border-color);
                color      : var(--tab-botton-color);
                display    : block;
                line-height: 2;
                padding    : 8px 18px;
                width      : 100%;
                .transition-mixin();

                i {
                    width: 1.5em;
                }
            }

            &::before {
                content: none;
            }

            &:not(.active) {
                button {
                    &:hover {
                        background: var(--tab-button-hover-bg-color);
                        border-top: 2px solid var(--tab-button-hover-bg-color);
                    }
                }
            }

            &.active {
                button {
                    background: var(--tab-button-active-bg-color);
                    border-top: 2px solid var(--primary);
                    cursor    : default;
                }
            }
        }
    }

    .trm-tab-contents {
        background: var(--tab-button-active-bg-color);

        .trm-tab-item-content {
            display : none;
            padding : 20px;
            position: relative;

            &.active {
                display: block;
            }
        }
    }
}

/* 相册排版 */
.fj-gallery {
    position: relative;
    overflow: hidden;

    &::after {
        content: "";
        display: block;
        clear  : both;
    }

    .fj-gallery-item {
        float: left;
        top  : 0;
        left : 0;

        >img {
            display      : block;
            width        : 100%;
            height       : auto;
            border-radius: 0;
        }
    }
}